<%--
  Created by IntelliJ IDEA.
  User: eternal
  Date: 2024/11/9
  Time: 18:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../css/admin_yuyue.css" />
    <link rel="stylesheet" href="../css/admin_nav.css" />
    <style>
        .main {
            padding: 20px;
            min-width: 1200px; /* 设置最小宽度 */
            overflow-x: auto; /* 内容过宽时显示滚动条 */
        }
        
        .content_table {
            width: 100%;
            overflow-x: auto;
        }
        
        table {
            width: 100%;
            min-width: 1000px; /* 设置表格最小宽度 */
            table-layout: fixed; /* 固定表格布局 */
        }
        
        /* 设置各列的宽度 */
        th.select, td:first-child {
            width: 60px;
        }
        
        th.number, td:nth-child(2) {
            width: 80px;
        }
        
        /* 图片列 */
        th:nth-child(3), td:nth-child(3) {
            width: 200px;
        }
        
        /* 跳转链接列 */
        th:nth-child(4), td:nth-child(4) {
            width: auto;
        }
        
        /* 操作列 */
        th:last-child, td:last-child {
            width: 120px;
        }
        
        /* 表格内的图片样式 */
        td img {
            max-width: 150px;
            max-height: 100px;
            object-fit: cover;
        }
        
        /* 顶部操作栏固定宽度 */
        .top {
            min-width: 1000px;
            margin-bottom: 20px;
            display: flex;
            gap: 10px; /* 添加按钮间距 */
            align-items: center;
        }
        
        .top .search {
            width: 200px;
            margin-right: auto; /* 让搜索框靠左，按钮靠右 */
        }
        
        .top .add,
        .top .batch-delete {
            padding: 5px 15px;
            cursor: pointer;
        }
        
        /* 分页部分固定位置 */
        .pagination {
            margin-top: 20px;
            text-align: right;
            min-width: 1000px;
        }

    </style>
</head>
<body>
<jsp:include page="admin.jsp" />
<div class="content">
    <jsp:include page="admin_nav.jsp" />
    <div class="main">
        <form action="#">
            <div class="top">
                <input type="search" placeholder="请输入搜索内容" class="search" />
                <input type="button" value="新增" class="add" />
                <input type="button" value="批量删除" class="batch-delete" />
            </div>
            <div class="content_table">
                <table>
                    <thead>
                    <tr>
                        <th class="select"><input type="checkbox" /></th>
                        <th class="number">序号</th>
                        <th>图片</th>
                        <th>跳转链接</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><input type="checkbox" /></td>
                        <td>1</td>
                        <td><img src="path/to/image1.jpg" alt="广告图片1" /></td>
                        <td>https://m8u8player.org</td>
                        <td>
                            <a href="#" class="edit">编辑</a>
                            <a href="#" class="delete">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" /></td>
                        <td>2</td>
                        <td><img src="path/to/image2.jpg" alt="广告图片2" /></td>
                        <td>https://m8u8player.org</td>
                        <td>
                            <a href="#" class="edit">编辑</a>
                            <a href="#" class="delete">删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="pagination">
                    <span>共2条数据</span>
                    <input type="number" value="1" min="1" />
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 弹窗表单和遮罩层可以保留，但需要修改内容 -->
<form action="#" method="post" class="popup-form">
    <div class="add_appoitment">
        <h2>新增广告</h2>
        <p>
            <label>
                图片上传：
                <input type="file" accept="image/*"/>
            </label>
        </p>
        <p>
            <label>
                跳转链接：
                <input type="url" class="one"/>
            </label>
        </p>
        <input type="button" value="取消" class="cancel"/>
        <input type="submit" value="确认" class="submit_app"/>
    </div>
</form>
<div class="overlay"></div>
<script>
    var add = document.querySelector(".add");
    var change = document.querySelector('.add_appoitment');
    var overlay = document.querySelector('.overlay');
    add.onclick = function(){
        change.style.display='inline-block';
        overlay.style.display='inline-block';
    }
    var cancel = document.querySelector('.cancel');
    cancel.onclick = function(){
        change.style.display='none';
        overlay.style.display='none';
    }
</script>
</body>
</html>
